<template>
    <view class="content bg-img bg-mask ">
        <u-navbar :title="i18n.cbjulu1.i1" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>

        <view class="" :style="[{ height: 80 + 'px' }]"></view>
        <view class="flex head  f30">
            <text class="f-1 flex justify-center">{{ i18n.cbjulu1.i2 }}</text>
            <text class="f-1 flex justify-center">{{ i18n.cbjulu1.i3 }}</text>
            <text class="f-1 flex justify-center">{{ i18n.cbjulu1.i4 }}</text>
        </view>
        <scroll-view class="scroll" @scrolltolower="loadMore" scroll-y enable-back-to-top scroll-with-animation>
            <block>
                <view v-for="(item, index) in data" :key="index" class="padding-tb-sm  list f30 r flex  ">
                    <text class="f-1 flex justify-center">{{ i18n.cbjulu1.i5 }}</text>
                    <text class="f-1 flex justify-center f25 align-center">{{ item.createtime | dateFormat }}</text>
                    <text class="f-1 flex justify-center">
                        {{ addd(item.ability) }}
                        <text style="color: rgb(73, 251, 221);" class="margin-left-xs">T</text>
                    </text>
                </view>
            </block>
        </scroll-view>

        <w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
    </view>
</template>

<script>
import myAbnorPage from '../../components/my-abnor-page/my-abnor-page.vue';
export default {
    data() {
        return {
            CustomBar: this.CustomBar,
            page: 1,
            rows: 20,
            data: [],
            total: '',
        };
    },
    onLoad() {
        var obj = setInterval(() => {
            if (window.tronWeb) {
                clearInterval(obj);
                this.exchangeComputingPower();
                this.show = true;
            } else {
                this.show = false;
            }
        }, 20);
    },
    computed: {
        i18n() {
            return this.$t('message');
        },
    },
    // onReachBottom() {
    //     console.log('111111 :>> ', 111111);
    //     this.page++;
    //     if (this.data.length <= this.total) {
    //         this.exchangeComputingPower();
    //     }
    // },

    methods: {
        async loadMore() {
            console.log('111111 :>> ', 111111);
            this.page++;
            console.log('this.data.length :>> ', this.data.length);
            console.log('this.total :>> ', this.total);
            if (this.data.length  <  this.total) {
                this.exchangeComputingPower();
            }
        },
        addd(e) {
            return Number(e).toFixed();
            // return  e.toFixed()
        },
        addrr(e) {
            console.log('e :>> ', e);
            if (e) {
                return e.substring(0, 4) + '****' + e.substring(e.length - 4);
            }
        },
        async exchangeComputingPower() {
            this.$refs.loading.open();
            let obj = {
                page: this.page,
                rows: this.rows,
            };
            const res = await this.$u.post('/index.php/api/pec/abilityLog', obj, { token: uni.getStorageSync('token') });

            setTimeout(() => {
                this.$refs.loading.close();

                if (res.data.total) {
                    this.data = [...this.data, ...res.data.log];
                    this.total = res.data.total;
                } else {
                    
                }
            }, 500);
        },
    },
    filters: {
        dateFormat(originVal) {
            var originVal = Number(originVal) * 1000;
            const dt = new Date(originVal);

            const y = dt.getFullYear();
            const m = (dt.getMonth() + 1 + '').padStart(2, '0');
            // this.m = m;
            const d = (dt.getDate() + '').padStart(2, '0');
            const hh = (dt.getHours() + '').padStart(2, '0');
            const mm = (dt.getMinutes() + '').padStart(2, '0');
            const ss = (dt.getSeconds() + '').padStart(2, '0');
            // ${hh}:${mm}:${ss}
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    width: 100vw;
    height: 100vh;
    background-image: url(../../static/gern.png);
    .scroll {
        height: calc(100vh - 179px );
        
    }
    .head {
        margin-top: 90rpx;
        color: #f0f0f0;
        width: 702rpx;
        margin: 0 auto;
        margin-bottom: 50rpx;
    }
    .list {
        width: 702rpx;
        background: rgba(14, 16, 16, 0.44);
        color: #b3b3b3;
        margin: 0 auto;
        margin-bottom: 20rpx;
    }
}
</style>
